<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{ padding: 0; margin: 0 auto; list-style-type: none;}
    .tables{ flex: 1; margin: 0 auto;}
    .tables th,.tables td{ border: 1px solid #ccc; height: 50px; text-align: center; padding: 5px; box-sizing: border-box; position: relative;}
    .tables td > div{ height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: -1; }
    .cont{ width: 1200px; margin: 0 auto;}
    .cont h1{ text-align: center; padding: 30px 0;}
    .kccont { display: flex; flex-direction: row;}
    .kechenglist{ flex: 0 0 10%; margin-right: 15px;}
    .kechenglist > div{ padding: 15px 0; text-align: center; margin-bottom: 15px;}
    .xx{ position: absolute; top: 0; right: 0; width:20px; height: 20px; background-color:red;}
    .drag{ background-color: #ccc;}
</style>
<body>
    <div class="cont">
        <h1>课程表</h1>
        <div class="kccont">
            <div class="kechenglist" data-drop="move">
                <div data-effect="copy" draggable="true" style="background-color: aqua;">语文</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(0, 255, 119);">数学</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(255, 230, 0);">英语</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(255, 0, 179);">历史</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(255, 123, 0);">化学</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(0, 255, 119);">生物</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(255, 221, 0);">计算机</div>
                <div data-effect="copy" draggable="true" style="background-color: rgb(0, 255, 195);">科技</div>
            </div>
            <table style="border-collapse: collapse;" border="1" class="tables">
                <colgroup>
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th data-week="0"></th>
                        <th data-week="1">星期一</th>
                        <th data-week="2">星期二</th>
                        <th data-week="3">星期三</th>
                        <th data-week="4">星期四</th>
                        <th data-week="5">星期五</th>
                        <th data-week="6">星期六</th>
                        <th data-week="7">星期日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="4" style="background-color: #eee;">上午</td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td rowspan="4" style="background-color: #eee;">下午</td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        let kccont = document.querySelector(".kccont");
        let tds = document.querySelectorAll(".tables td");
        //获取当前星期
        let week = new Date().getDay();
        //获取th
        let ths = document.querySelectorAll(".tables th");
        for(let i = 0;i<ths.length;i++){
            if(i == week){
                ths[i].style.color = "red";
                ths[i].style.backgroundColor = "rgb(230,230,230)";
            }
        }
        for(let i = 0;i<tds.length;i++){
            if(tds[i].getAttribute("data-drop") == "copy"){
                tds[i].addEventListener('dblclick',function(){
                    if(this.innerHTML == ''){
                        return;
                    }
                    this.innerHTML = '';
                    this.classList.remove('drag');
                })
            }
        }
        let leixing = 'copy';
        let yuansu = '';
        kccont.ondragstart = (e) => {
            //console.log(e.target);
            yuansu = e.target;
        }
        kccont.ondragover = (e) => {
            //console.log(e.target);
            e.preventDefault();
        }
        kccont.ondragenter = (e) => {
            //console.log(e.target);
            if(e.target.dataset.drop === 'copy'){
                e.target.classList.add('drag');
            }
        }

        kccont.ondragleave = (e) => {
            //console.log(e.target.dataset.drop);
            if(e.target.dataset.drop === 'copy'){
                e.target.classList.remove('drag');
            }
        }
        kccont.ondrop = (e) => {
            console.log(e);
            e.target.classList.remove('drag');
            if(e.target.dataset.drop === 'copy'){
                e.target.innerHTML = '';
                aloneea = yuansu.cloneNode(true);
                aloneea.setAttribute('draggable', 'false');
                e.target.appendChild(aloneea);
            }
        }
    </script>
</body>
</html>